<template>
 <div class="all">
     <div class="two" @click="searchYJJ('应急局涉危企业')">
        <div class="top">
            <span>应急局涉危企业</span>
            <span>(家)</span>

        </div>
        <div class="count">
            <countTo :startVal='0' :endVal="countYJJ" :duration=1000></countTo>
        </div>
    </div>
     <div class="two" @click="searchYJJ('一类爆炸品企业')">
        <div class="top">
            <span>一类爆炸品企业</span>
            <span>(家)</span>
        </div>
        <div class="count">
            <countTo :startVal='0' :endVal="countBZP" :duration=1000></countTo>
        </div>
    </div>
 </div>
</template>

<script>
import countTo from 'vue-count-to'
import {reqYJJNumber,reqFindIExplosives} from '@/api/home/index.js'
import { mapGetters } from 'vuex'
export default {
     components:{
       
        countTo,
       
    },
    data(){
        return {
             countBZP:0,
            countYJJ:0
        }
    },
      computed: {
        ...mapGetters(['customCode']),

    },
     watch: {
        customCode(val) {
            // console.log(val);
            this.getList(val)
             this.getCount(val)
        },
       
    },
      created() {
        // console.log(this.$store.state.homeStatus.customName);
        if (this.customCode == '' || !this.customCode) {
            // 默认22 上海海关
            this.getList('22')
            this.getCount('22')
        } else {
            // 有数据就用store里面的数据
            this.getList(this.customCode)
             this.getCount(this.customCode)
        }
    },
    methods:{
        searchYJJ(val){
            // this.$store.commit('homeStatus/changeShowYJJ', {
            //     show: true,
            //     value: val,
            //  })
             this.$store.commit('homeStatus/changeEnterpriseLabel', val)
        },
          async getCount(code){
        const res=await reqFindIExplosives({customsCode:code})
        if(res.code==200){
            this.countBZP=res.data
        }else {
            this.countBZP=0
        }
      },
        async getList(code){
           const res= await reqYJJNumber({customsCode:code})
           if(res.code==200){
            this.countYJJ=res.data
           }else {
                this.countYJJ=0
           }
        }
    }
}
</script>

<style lang="scss" scoped>
.all {
    height: 185px;
}
 .two{
    padding: 0 100px;
     display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    height: 50%;
    .top {
        color: #fff;
        font-size: 20px;
        display: flex;
        flex-direction: column;
        
    }
    .top:hover{
             color: #00ffff;
    }
    .count {
        margin-left: 20px;
        color: #00ffff;
        font-size: 60px;
        font-family: "Agency FB W00 Regular";
    
        letter-spacing: 1px;
    }
 }
</style>